import React from 'react';
import { Card, Typography, Space } from 'antd';
import { BugOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;

const CrawlerTasksPage: React.FC = () => {
  return (
    <div style={{ padding: '24px' }}>
      <Card 
        style={{ 
          background: 'rgba(0, 0, 0, 0.3)', 
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255, 255, 255, 0.1)',
          borderRadius: 8
        }}
      >
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div>
            <BugOutlined style={{ fontSize: '24px', color: '#61dca3', marginRight: '12px' }} />
            <Title level={2} style={{ color: '#fff', display: 'inline' }}>爬虫任务管理</Title>
          </div>
          
          <Text style={{ color: 'rgba(255, 255, 255, 0.85)' }}>
            在这里您可以创建、管理和监控您的爬虫任务。支持静态和动态网页爬取，提供可视化配置界面。
          </Text>
          
          <div style={{ 
            background: 'rgba(97, 220, 163, 0.1)', 
            border: '1px solid rgba(97, 220, 163, 0.3)', 
            borderRadius: 6, 
            padding: '16px',
            marginTop: '24px'
          }}>
            <Title level={4} style={{ color: '#61dca3', marginTop: 0 }}>功能特性</Title>
            <ul style={{ color: 'rgba(255, 255, 255, 0.85)', paddingLeft: '20px' }}>
              <li>支持多种爬虫模板</li>
              <li>可视化任务配置</li>
              <li>实时任务监控</li>
              <li>错误日志追踪</li>
              <li>数据导出功能</li>
            </ul>
          </div>
        </Space>
      </Card>
    </div>
  );
};

export default CrawlerTasksPage;